<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-bar-stack',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'bar'
    }
  },

  computed: {
    yNamePad () {
      if (this.yNamePadding instanceof Array) {
        return this.yNamePadding
      } else if (this.yNamePadding === '') {
        return []
      } else {
        let name = this.yNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    xNamePad () {
      if (this.xNamePadding instanceof Array) {
        return this.xNamePadding
      } else if (this.xNamePadding === '') {
        return []
      } else {
        let name = this.xNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    }
  },

  methods: {
    setSeries () {
      let length = 0
      if (this.seriesIsRow) {
        length = this.data.length
      } else {
        length = this.data[0].length
      }
      this.series = []
      for (let i = 0; i < length - 1; i++) {
        this.series.push({
          type: this.chartType,
          label: {
            show: this.showLabel,
            fontSize: this.labelFontSize,
            position: this.labelPosition,
          },
          stack: this.isStack,
          barMaxWidth: this.barMaxWidth,
          seriesLayoutBy: this.seriesIsRow ? 'row' : 'column'
        })
      }

      if (this.extendOption && this.funcExtOption !== '' && typeof this.funcExtOption === 'function') {
        this.funcExtOption(this)
      }
    }
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },
    showLabel () {
      this.setSeries()
    },
    labelFontSize () {
      this.setSeries()
    },
    labelPosition () {
      this.setSeries()
    },
    isStack () {
      this.setSeries()
    },
    barMaxWidth () {
      this.setSeries()
    },
    extendOption () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
